import React, {Component} from 'react';
import { connect } from 'react-redux'
import { Carousel } from 'antd-mobile';

import { changeUiTitle } from '../../store/actions/ui'
import { getCarousel } from "../../services";
import './home.less'

@connect(null,{ changeUiTitle })
class Home extends Component {
    constructor(){
        super();
        this.state={
            carousel:[],
            imgHeight:0
        }
    }
    componentDidMount() {
        this.props.changeUiTitle('首页');
        getCarousel()
            .then(resp=>{
                this.setState({
                    carousel:resp.data.data
                });
            })
            .catch(error=>{
                console.log(error)
            })
    }

    render() {
        return (
            <div>
                <Carousel className="pro-carousel"
                    autoplay
                    aotuplayInterval={500}
                    speed={1000}
                    infinite
                >
                    {this.state.carousel.map(val => (
                        <a
                            key={val.id}
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={val.img}
                                alt={val.title}
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </div>
        );
    }
}

export default Home;